<template>
	<view>
		<view class="img-box">
			<image v-if="aiInfo.state==3" :src="img" class="img" show-menu-by-longpress @click="view(img)"></image>
		</view>
		<view class="item">
			<view class="title">时间</view>
			<view class="text">{{aiInfo.time | formatDate}}</view>
		</view>
		<view class="item">
			<view class="title">关键词Tag：</view>
			<view class="text">{{tagStr}}</view>
		</view>
		<view class="bom">
			<button open-type="share" v-if="aiInfo.state==3">分享</button>
			<view class="btn" @click="toPage">回到首页</view>
			<view class="refresh" v-if="show" @click="refresh">刷新</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				//state ：0失败，1进行中，2绘制完成，审核中，3审核完成，已完成
				oId: '', //ac74c002636caf2e008c2a551f3b1941
				aiInfo: '',
				img: '',
				tagStr: '',
				show: true,
			}
		},
		computed: {},
		watch: {},
		methods: {
			async setGallery(e) {
				let user = uni.getStorageSync("userInfo")
				const db = wx.cloud.database()
				let one = false
				if (e == 1) {
					one = true
				}
				const info = await db.collection('order_ai').doc(this.oId).update({
					data: {
						isGallery: one,
						avatarUrl: user.avatarUrl,
						nickName: user.nickName,
					}
				})
				this.getOrder()
			},
			view(e) {
				wx.previewImage({
					urls: [e],
					showmenu: true,
				})
			},
			toPage() {
				uni.switchTab({
					url: "/pages/index/index"
				});
			},
			async getOrder() {
				const db = wx.cloud.database()
				const info = await db.collection('order_ai').doc(this.oId).get()
				console.log(info.data)
				this.aiInfo = info.data
				this.img = this.aiInfo.url
				this.tagStr = this.aiInfo.data.data[0]
			},
			refresh() {
				uni.showToast({
					icon: 'loading',
					title: '刷新状态'
				})
				this.getOrder()
				this.show = false
				setTimeout(() => {
					this.show = true
				}, 5000)
			},

		},
		onLoad(options) {
			this.oId = options._id
			this.getOrder()
		},
		onShow() {

		},
		onReady() {},
		onPullDownRefresh() {},
		onReachBottom() {},
		onShareAppMessage() {
			return {
				title: '啊吧卡牌-ai绘图分享',
				path: '/sub-diy/aiShare/aiShare?_id=' + this.oId,
			}
		},
		// onShareTimeline() {
		// 	return {
		// 		title: '啊吧卡牌-ai绘图分享',
		// 		path: '/sub-diy/aiShare/aiShare?_id=' + this.oId,
		// 	}
		// },
		onPageScroll() {},

	}
</script>

<style lang="scss" scoped>
	button::after {
		border: none;
	}

	button {
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-decoration: none;
		overflow: hidden;
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: linear-gradient(#00AEEC, #1296db);
		color: #fff;
		border-radius: 20rpx;
	}

	.img-box {
		width: 600rpx;
		height: 900rpx;
		text-align: center;
		background-color: #fff;
		margin: 30rpx auto;

		.state {
			.title {
				padding-top: 100rpx;
			}

			.icon {
				margin-top: 50rpx;
				width: 120rpx;
				height: 120rpx;
			}
		}

		.img {
			width: 600rpx;
			height: 900rpx;
		}
	}

	.item {
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			width: 200rpx;
		}

		.text {
			width: 500rpx;
			font-size: 28rpx;
		}
	}

	.bom {
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 750rpx;
		height: 160rpx;
		background-color: #fff;

		.btn {
			margin: 0 auto;
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: linear-gradient(#00AEEC, #1296db);
			color: #fff;
			border-radius: 20rpx;

		}

		.refresh {
			position: absolute;
			top: -100rpx;
			right: 30rpx;
			width: 120rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background: linear-gradient(#00AEEC, #1296db);
			color: #fff;
			border-radius: 20rpx;
		}
	}
</style>
